<template>
  <!-- 筛选区 -->
  <!-- 渲染页面的时候, filterData还没有得到异步请求的数据 -->
  <!-- 所有就不能将 filterData 设置为 ref(null), 而是ref({}) -->
  <!-- 使用v-if="filterLoading" 正在加载数据时显示骨架 -->
  <div v-if="!filterLoading" class="sub-filter">

    <!-- 每个二级分类必有品牌 -->
    <!--@click="filterData.selectedBrand = item.id">-->
    <!--@click="item.selectedAttr = sub.id">-->
    <div class="item">
      <div class="head">品牌:</div>
      <div class="body">
        <!--<a class="ellipsis active" href="javascript:;">全部</a>-->
        <a v-for="item in filterData.brands"
           :key="item.id"
           :class="{active: item.id === filterData.selectedBrand}"
           class="ellipsis"
           href="javascript:;"
           @click="changeBrand(item.id)">
          {{ item.name }}
        </a>
      </div>
    </div>

    <!-- 每个二级分类有可选的销售属性 -->
    <div v-for="item in filterData.saleProperties"
         :key="item.id"
         class="item">
      <div class="head">{{ item.name }}:</div>
      <div class="body">
        <a v-for="sub in item.properties"
           :key="sub.id"
           :class="{active: sub.id === item.selectedAttr}"
           class="ellipsis"
           href="javascript:;"
           @click="changeSaleProp(item,sub.id )">
          {{ sub.name }}
        </a>
      </div>
    </div>
  </div>

  <!-- 数据正在加载时, 显示骨架 -->
  <div v-else class="sub-filter">
    <XtxSkeleton animated class="item" height="40px" width="800px"></XtxSkeleton>
    <XtxSkeleton animated class="item" height="40px" width="800px"></XtxSkeleton>
    <XtxSkeleton animated class="item" height="40px" width="600px"></XtxSkeleton>
    <XtxSkeleton animated class="item" height="40px" width="600px"></XtxSkeleton>
    <XtxSkeleton animated class="item" height="40px" width="600px"></XtxSkeleton>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import API from '@/api/category'
import XtxSkeleton from '@/components/library/XtxSkeleton'

export default {
  name: 'SubFilter',
  components: { XtxSkeleton },
  props: {},
  setup(props, { emit }) {
    const route = useRoute()
    // 监听二级分类Id的变化获取筛选数据
    // 由于进行切换动态路由之间的切换, 不会去初始化组件, 也就是说不会去重新执行setup()函数
    // filterData 一开始状态是 {}, 从首页 -> 二级 filterDate是有值的, 二级 -> 二级 filterData的值不会在变成{}
    // 所以想进行动态路由切换时, 从新加载数据, 所有使用了监听器的方式
    const filterData = ref({})
    const filterLoading = ref(false)

    watch(() => route.params.id, (newVal) => {
      // 变化的ID有值, 且处在二级类名路由下
      if (newVal && `/category/sub/${newVal}` === route.path) {
        filterLoading.value = true
        // 发请求获取数据
        API.getSubCategoryFilter(route.params.id)
            .then((res) => {

              // 每一组可选的筛选条件缺失 全部 条件, 处理下数据加上全部
              // 给每一组数据加上一个选中的Id, 由于`全部`设置的id为null,
              // 所有`全部`根据规则 item.id === filterData.brands.selectedBrand 是默认选中的
              // 1.品牌
              res.result.selectedBrand = null
              res.result.brands.unshift({
                id: null,
                name: '全部'
              })
              // 2.各种销售属性
              res.result.saleProperties.forEach(item => {
                item.selectedAttr = null
                item.properties.unshift({
                  id: null,
                  name: '全部'
                })
              })
              // 设置修改的数据
              filterData.value = res.result
              filterLoading.value = false
              console.log(res.result)
              // console.log(filterData.value)
            })
      }
    }, { immediate: true })

    // console.log(filterData.value)  打印为null, 这是因为请求是异步的

    // 构建筛选参数的函数
    const getFilterParams = () => {
      const obj = {
        brandId: null,
        attrs: []
      }
      // 品牌
      obj.brandId = filterData.value.selectedBrand
      // 销售属性
      filterData.value.saleProperties.forEach(item => {
        // 当选择全部的时候, 数组会自动删除之前添加的attrs, 为什么?
        // 因为每次点击筛选项的时候, 都会重新调用这个方法, obj调用的时候初始化
        // 每次调用都会进行条件过滤, 原本选项有值 -> `全部`, selectedAttr = null, 就不会进入这个判断
        // 所以就造成了, 从销售属性有值 -> `全部`, 数组长度减1的情况
        if (item.selectedAttr !== null) {
          const prop = item.properties.find(prop => prop.id === item.selectedAttr)
          obj.attrs.push({
            groupName: item.name,
            propertyName: prop.name
          })
        }
      })
      if (obj.attrs.length === 0) obj.attrs = null
      // 参考数据: {brandId: '', attrs:[{groupName: '', propertyName: ''}, ... ]}
      return obj
    }

    // 1.记录当前选择的品牌
    const changeBrand = (brandId) => {
      // 重复点击一个按钮, 直接返回
      if (filterData.value.selectedBrand === brandId) return
      filterData.value.selectedBrand = brandId
      // console.log(filterData.value)
      const filterParams = getFilterParams()
      // console.log(data)
      emit('filter-change', filterParams)
    }

    // 2.记录当前选择的销售属性
    const changeSaleProp = (item, subId) => {
      // 重复点击一个按钮, 直接返回
      if (item.selectedAttr === subId) return
      item.selectedAttr = subId
      // console.log(filterData.value)
      // 可以直接在方法参数上, 调用一个函数(且函数一定要有返回值), 函数的返回值作为该方法参数
      emit('filter-change', getFilterParams())
    }

    return {
      filterData,
      filterLoading,
      changeBrand,
      changeSaleProp
    }
  }
}
</script>

<style lang="less" scoped>

.sub-filter {
  background-color: #fff;
  padding: 25px;

  .item {
    display: flex;

    .head {
      color: #999;
      width: 80px;
      line-height: 40px;
    }

    .body {
      flex: 1;

      a {
        display: inline-block;
        max-width: 112px;
        line-height: 40px;
        margin-right: 40px;
        transition: all 0.3s;

        &.active {
          color: @xtxColor;
        }
      }
    }
  }

  .xtx-skeleton {
    padding: 10px 0;
  }

}
</style>
